<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/shijxc.css" />
  <link rel="stylesheet" href="css/flex.css" />
  <link rel="stylesheet" href="css/swiper-bundle.min.css" />

</head>

<body>
  <div class="container">
    <div class="top">
      一村九园可视化管理市级平台
    </div>
    <div class="box s-b">
      <div class="box_left">
        <!-- 顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">乡镇收入/支出</div>
        </div>
        <!-- 收入支出的echarts -->
        <div class="xzzc_top_e">

        </div>
        <div class="aj-c mt-64 mb-30">
          <div class="left_xzzc aj-c">生态环境监测</div>
        </div>
        <div class="xzzc_bottom_e s-c-b ">
          <div class="j-c">
            <div class="staijianc_noactive aj-c ml-16  shuiqs" onclick="sthj('shuiqs')"> 水情 </div>
            <div class="staijianc_noactive aj-c ml-16  yuqs" onclick="sthj('yuqs')"> 雨情 </div>
            <div class="staijianc_noactive aj-c ml-16  wends" onclick="sthj('wends')"> 温度</div>
            <div class="staijianc_noactive aj-c ml-16  shids" onclick="sthj('shids')">湿度 </div>
            <div class="staijianc_noactive aj-c ml-16   turs" onclick="sthj('turs')"> 土壤</br>pH值</div>
            <div class="staijianc_noactive aj-c ml-16  gzs" onclick="sthj('gzs')"> 光照</br>强度 </div>
          </div>
          <!-- 生态环境echarts -->
          <div class="shuiq">
          </div>
        </div>
      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top aj-c s-b">
          <div class="box_center_top_box">
            <div class="box_center_top_left aj-c mb-36">
              本市疫情
            </div>
            <div class="box_center_top_left aj-c mb-36">
              面积
            </div>
            <div class="box_center_top_left aj-c mb-36">
              收入
            </div>
            <div class="box_center_top_left aj-c mb-36">
              支出
            </div>
          </div>
          <!-- 地图echarts -->
          <div class="maps" style="border: 1px  solid ;">
          </div>
          <div class="box_center_top_box">
            <div class="box_center_top_left aj-c mb-36">
              宅地基面积
            </div>
            <div class="box_center_top_left aj-c mb-36">
              土地承包</br>经营面积
            </div>
            <div class="box_center_top_left aj-c mb-36">
              基本农</br>田面积
            </div>
            <div class="box_center_top_left aj-c mb-36">
              高标准</br>农田面积
            </div>
          </div>
        </div>
        <!-- 疫情区域 -->
        <div class="box_center_center mt-20 flex">
          <div class="box_center_center_box">
            <div class="bsyq mr-50 ">
              <div class="bsyq_item aj-c mb-40 shis" onclick="yiq('shis')">本市疫情</div>
              <div class="bsyq_item aj-c mb-40 shengs" onclick="yiq('shengs')">省内疫情</div>
              <div class="bsyq_item aj-c mb-40 chinas" onclick="yiq('chinas')">国内疫情</div>
            </div>
          </div>
          <div class="f-wrap yiqing s-b">

          </div>
        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc" style="z-index: 111;" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy" style="z-index: 111;" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy" style="z-index: 111;" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>


      </div>
      <div class="box_right">
        <div class="aj-c">
          <div class="left_xzzc aj-c">安防应急</div>
        </div>
        <!-- TAB·切换 -->
        <div class="box_right_tab s-b aj-c ml-16 mt-24">
          <div class="aj-c jksbs  " onclick="anfyj('jksbs')">监控设备</div>
          <div class="aj-c fkqys  " onclick="anfyj('fkqys')">防控区域</div>
          <div class="aj-c fkzds  " onclick="anfyj('fkzds')">监控站点</div>
          <div class="aj-c yjcss  " onclick="anfyj('yjcss')">预警次数</div>
        </div>
        <!-- 安防应急echarts -->
        <div class="box_right_top mt-24 s-b aj-c">

          <div class="box_right_top_quan">

          </div>
          <div class="box_right_top_list">
            <div class="flex s-b mt-18 box_right_top_list_item ">
              <div class="flex aj-c">
                <div class="border_id aj-c">1</div>
                <div class="yjtitle ml-8 mr-20">浦东镇街</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">50</div>
            </div>

            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">2</div>
                <div class="yjtitle ml-8 mr-20">浦东镇街</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">50</div>
            </div>

            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">3</div>
                <div class="yjtitle ml-8 mr-20">浦东镇街</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150</div>
            </div>
            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">4</div>
                <div class="yjtitle ml-8 mr-20">浦东镇街</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150</div>
            </div>
          </div>
        </div>

        <div class="aj-c mt-28">
          <div class="left_xzzc aj-c">巩固脱贫</div>
        </div>
        <div class="flex mt-24">
          <div class="selecttimes " style="position: relative;">
            <div class="select_box flex aj-c mr-10" onclick="selectTime()">
              <div class="select_box_left"></div>
              <div class="select_box_title">2022</div>
              <div class="select_box_right"></div>
            </div>
            <div class="selecttimesChild"></div>


          </div>
          <div class="swiper mySwiper">
            <div class="swiper-wrapper line" onclick='InnerFunction(event)'>

            </div>
          </div>
        </div>

        <!-- 脱贫  检测户 低保家庭等 -->
        <div class="flex f-wrap s-b mt-27 ggtpbank">

        </div>
        <!-- 巩固脱贫echarts -->
        <div class="mt-24 ggecharts"></div>
      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <script src="layui/layui.js"></script>
  <script src="js/shijixc.js"></script>
  <script>
    // 渲染月份 
    var date = new Date;
    var year = date.getFullYear();
    var monthlength = String(date.getMonth() + 1).length == 1 ? `0${(date.getMonth() + 1)}` : (date.getMonth() + 1);
    console.log(monthlength, 'monthlengthmonthlength')
    var month = date.getMonth() + 1;
    // 初始化选择时间  2020年5月
    changedocu();
    function changedocu() {
      document.getElementsByClassName('select_box_title')[0].innerHTML = year;

      var swiperMonth = document.getElementsByClassName('swiper-wrapper')[0];
      swiperMonth.innerHTML = ''
      for (let index = 1; index < month + 1; index++) {
        swiperMonth.innerHTML += `
        <div class="swiper-slide">
                <div class="jb_line_item_buj">
                  <div class="jb_line_item_buj_img"></div>
                  <div class="jb_line_item_buj_title">${(String(index)).length == 1 ? '0' + index : index}月</div>
                </div>
              </div> 
        `
      }
      // 巩固脱贫的默认值默认选中第一个月

      document.getElementsByClassName('jb_line_item_buj_img')[`${month - 1}`].className = 'jb_line_item_buj_img jb_line_item_buj_img_active';
      clickMonth(`${monthlength}月`);

    }
    // // 初始化安防应急的监控设备
    // document.querySelector('.box_right_top_list').innerHTML = `    `;
    // 初始化安防应急的监控设备
    document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
    box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度


    // 乡镇收入支出的echarts
    xzzc_top_e([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
    // 地图
    maps()
    // 底部tab跳转
    document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy';
    document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
    document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active'


    // 安防应急
    document.getElementsByClassName('jksbs')[0].className = 'aj-c jksb bsyq_item_active';

    document.getElementsByClassName('fkqys')[0].className = 'aj-c fkqy'
    document.getElementsByClassName('fkzds')[0].className = 'aj-c fkzd'
    document.getElementsByClassName('yjcss')[0].className = 'aj-c yjcs'
    // 安防应急 下
    document.getElementsByClassName('box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active'
    // 生态环境监测
    document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 staijianc_active';
    document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
    document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16'
    document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16'
    document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16'
    document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
    shuiq([130, 240, 230, 240, 1030])

    // 市区疫情区域初始化
    document.getElementsByClassName('shis')[0].className = 'bsyq_item aj-c mb-40 shis bsyq_item_active'
    document.getElementsByClassName('shengs')[0].className = 'bsyq_item shengs aj-c mb-40 shengs '
    document.getElementsByClassName('chinas')[0].className = 'bsyq_item chinas aj-c mb-40 chinas'
    document.getElementsByClassName('yiqing')[0].innerHTML =

      `<div class="bsyq_right mb-30 ">
                  <div class="aj-c bsyq_right_title mt-11">新增确诊</div>
                  <div class="aj-c bsyq_right_num mt-12" style="color: #1AFFE4;">20202</div>
                </div>
                <div class="bsyq_right mb-30">
                  <div class="  aj-c bsyq_right_title mt-11">新增本土</div>
                  <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">20202</div>
                </div>
                <div class="bsyq_right mb-30">
                  <div class="  aj-c bsyq_right_title mt-11">新增境外</div>
                  <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">20202</div>
                </div>
                <div class="bsyq_right mb-30   ">
                  <div class="  aj-c bsyq_right_title mt-11">新增无症状</div>
                  <div class="  aj-c bsyq_right_num mt-2" style="color: #34CE72;">20202</div>
                </div>
                <div class="bsyq_right mb-30    ">
                  <div class="aj-c bsyq_right_title mt-11">现有确诊</div>
                  <div class="aj-c bsyq_right_num mt-2" style="color: #1AFFE4;">20202</div>
                </div>
                <div class="bsyq_right mb-30   ">
                  <div class="  aj-c bsyq_right_title mt-11">累计确诊</div>
                  <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">20202</div>
                </div>
                <div class="bsyq_right mb-30 ">
                  <div class="  aj-c bsyq_right_title mt-11">累计治愈</div>
                  <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">20202</div>
                </div>
                <div class="bsyq_right mb-30">
                  <div class="  aj-c bsyq_right_title mt-11">累计死亡</div>
                  <div class="  aj-c bsyq_right_num   mt-2" style="color: #34CE72;">20202</div>
                </div>`

    function tabs(value) {
      switch (value) {
        case 'cy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './shijicy.html'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './shijigy.html'

          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          window.location.href = './shijixc.html'
          break;

        default:
          break;
      }
    }
    // 时间下拉
    var selectindex = 0;
    function selectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('selecttimesChild')[0].innerHTML = ` 
      <div class="" 
      style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5rem;position: absolute;z-index: 999;background-color: #02184A; "
       onclick="addtime(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">2018</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">2019</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">2020</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">2021</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">2022</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('selecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    // 下拉时间选中
    function addtime(a) {
      var changetime = a.target.outerText;//选择的下拉时间
      document.getElementsByClassName('selecttimesChild')[0].innerHTML = '';
      document.getElementsByClassName('select_box_title')[0].innerHTML = changetime;
      document.getElementsByClassName('line')[0]


      selectindex = 0;
      // 月份对应 
      if (changetime < year) {
        var swiperMonth = document.getElementsByClassName('swiper-wrapper')[0];

        swiperMonth.innerHTML = '';
        for (let index = 1; index < 12 + 1; index++) {
          swiperMonth.innerHTML += `
          <div class="swiper-slide">
                <div class="jb_line_item_buj">
                  <div class="jb_line_item_buj_img"></div>
                  <div class="jb_line_item_buj_title">${(String(index)).length == 1 ? '0' + index : index}月</div>
                </div>
          </div> 
        `
        }
        document.getElementsByClassName('jb_line_item_buj_img')[0].className = 'jb_line_item_buj_img jb_line_item_buj_img_active';
        clickMonth('01月');
      } else {
        changedocu();
      }


    }
    // 疫情切换
    function yiq(value) {
      switch (value) {
        case 'shis':
          document.getElementsByClassName('shis')[0].className = 'bsyq_item aj-c mb-40 shis bsyq_item_active';
          document.getElementsByClassName('shengs')[0].className = 'bsyq_item aj-c mb-40 shengs '
          document.getElementsByClassName('chinas')[0].className = 'bsyq_item aj-c mb-40 chinas'
          console.log(document.getElementsByClassName('yiqing'), 'document.getElementsByClassName')
          document.getElementsByClassName('yiqing')[0].innerHTML =
            `<div class="bsyq_right mb-30 ">
              <div class="aj-c bsyq_right_title mt-11">新增确诊</div>
              <div class="aj-c bsyq_right_num mt-12" style="color: #1AFFE4;">20202</div>
            </div>
            <div class="bsyq_right mb-30">
              <div class="  aj-c bsyq_right_title mt-11">新增本土</div>
              <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">20202</div>
            </div>
            <div class="bsyq_right mb-30">
              <div class="  aj-c bsyq_right_title mt-11">新增境外</div>
              <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">20202</div>
            </div>
            <div class="bsyq_right mb-30   ">
              <div class="  aj-c bsyq_right_title mt-11">新增无症状</div>
              <div class="  aj-c bsyq_right_num mt-2" style="color: #34CE72;">20202</div>
            </div>
            <div class="bsyq_right mb-30    ">
              <div class="aj-c bsyq_right_title mt-11">现有确诊</div>
              <div class="aj-c bsyq_right_num mt-2" style="color: #1AFFE4;">20202</div>
            </div>
            <div class="bsyq_right mb-30   ">
              <div class="  aj-c bsyq_right_title mt-11">累计确诊</div>
              <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">20202</div>
            </div>
            <div class="bsyq_right mb-30 ">
              <div class="  aj-c bsyq_right_title mt-11">累计治愈</div>
              <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">20202</div>
            </div>
            <div class="bsyq_right mb-30">
              <div class="  aj-c bsyq_right_title mt-11">累计死亡</div>
              <div class="  aj-c bsyq_right_num   mt-2" style="color: #34CE72;">20202</div>
            </div>`

          break;
        case 'shengs':
          document.getElementsByClassName('shis')[0].className = 'bsyq_item aj-c mb-40 shis';

          document.getElementsByClassName('shengs')[0].className = 'bsyq_item aj-c mb-40 shengs bsyq_item_active'
          document.getElementsByClassName('chinas')[0].className = 'bsyq_item aj-c mb-40 chinas'
          document.getElementsByClassName('yiqing')[0].innerHTML =

            `<div class="bsyq_right mb-30 ">
                <div class="aj-c bsyq_right_title mt-11">新增确诊</div>
                <div class="aj-c bsyq_right_num mt-12" style="color: #1AFFE4;">30202</div>
              </div>
              <div class="bsyq_right mb-30">
                <div class="  aj-c bsyq_right_title mt-11">新增本土</div>
                <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">5202</div>
              </div>
              <div class="bsyq_right mb-30">
                <div class="  aj-c bsyq_right_title mt-11">新增境外</div>
                <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">2022202</div>
              </div>
              <div class="bsyq_right mb-30   ">
                <div class="  aj-c bsyq_right_title mt-11">新增无症状</div>
                <div class="  aj-c bsyq_right_num mt-2" style="color: #34CE72;">2202</div>
              </div>
              <div class="bsyq_right mb-30    ">
                <div class="aj-c bsyq_right_title mt-11">现有确诊</div>
                <div class="aj-c bsyq_right_num mt-2" style="color: #1AFFE4;"> 202</div>
              </div>
              <div class="bsyq_right mb-30   ">
                <div class="  aj-c bsyq_right_title mt-11">累计确诊</div>
                <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">20202</div>
              </div>
              <div class="bsyq_right mb-30 ">
                <div class="  aj-c bsyq_right_title mt-11">累计治愈</div>
                <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">20202</div>
              </div>
              <div class="bsyq_right mb-30">
                <div class="  aj-c bsyq_right_title mt-11">累计死亡</div>
                <div class="  aj-c bsyq_right_num   mt-2" style="color: #34CE72;">20202</div>
              </div>`
          break;
        case 'chinas':
          document.getElementsByClassName('shis')[0].className = 'bsyq_item aj-c mb-40 shis';

          document.getElementsByClassName('shengs')[0].className = 'bsyq_item aj-c mb-40 shengs '
          document.getElementsByClassName('chinas')[0].className = 'bsyq_item aj-c mb-40 chinas bsyq_item_active'
          document.getElementsByClassName('yiqing')[0].innerHTML =

            `<div class="bsyq_right mb-30 ">
            <div class="aj-c bsyq_right_title mt-11">新增确诊</div>
            <div class="aj-c bsyq_right_num mt-12" style="color: #1AFFE4;">20202</div>
          </div>
          <div class="bsyq_right mb-30">
            <div class="  aj-c bsyq_right_title mt-11">新增本土</div>
            <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">10202</div>
          </div>
          <div class="bsyq_right mb-30">
            <div class="  aj-c bsyq_right_title mt-11">新增境外</div>
            <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">50202</div>
          </div>
          <div class="bsyq_right mb-30   ">
            <div class="  aj-c bsyq_right_title mt-11">新增无症状</div>
            <div class="  aj-c bsyq_right_num mt-2" style="color: #34CE72;">70202</div>
          </div>
          <div class="bsyq_right mb-30    ">
            <div class="aj-c bsyq_right_title mt-11">现有确诊</div>
            <div class="aj-c bsyq_right_num mt-2" style="color: #1AFFE4;">10202</div>
          </div>
          <div class="bsyq_right mb-30   ">
            <div class="  aj-c bsyq_right_title mt-11">累计确诊</div>
            <div class=" aj-c bsyq_right_num mt-2" style="color: #F9D354;">10202</div>
          </div>
          <div class="bsyq_right mb-30 ">
            <div class="  aj-c bsyq_right_title mt-11">累计治愈</div>
            <div class="  aj-c bsyq_right_num mt-2" style="color: #FFA13F;">10202</div>
          </div>
          <div class="bsyq_right mb-30">
            <div class="  aj-c bsyq_right_title mt-11">累计死亡</div>
            <div class="  aj-c bsyq_right_num   mt-2" style="color: #34CE72;">20202</div>
          </div>`
          break;

        default:
          break;
      }
    }
    // 生态环境监测
    function sthj(value) {
      switch (value) {
        case 'shuiqs':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 staijianc_active';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16'
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16'
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16'
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
          shuiq([130, 240, 230, 240, 1030])

          break;
        case 'yuqs':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 ';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 staijianc_active'
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16'
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16'
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16'
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
          shuiq([130, 240, 130, 340, 130])

          break;
        case 'wends':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 ';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16 staijianc_active'
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16'
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16'
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
          shuiq([130, 140, 130, 240, 100])

          break;
        case 'shids':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 ';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16 '
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16 staijianc_active'
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16'
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
          shuiq([130, 240, 130, 240, 1030])


          break;
        case 'turs':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 ';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16 '
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16 '
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16 staijianc_active'
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16'
          shuiq([230, 240, 130, 140, 1030])

          break;
        case 'gzs':
          document.getElementsByClassName('shuiqs')[0].className = 'staijianc_noactive shuiqs aj-c ml-16 ';
          document.getElementsByClassName('yuqs')[0].className = 'staijianc_noactive yuqs aj-c ml-16 '
          document.getElementsByClassName('wends')[0].className = 'staijianc_noactive wends aj-c ml-16 '
          document.getElementsByClassName('shids')[0].className = 'staijianc_noactive shids aj-c ml-16 '
          document.getElementsByClassName('turs')[0].className = 'staijianc_noactive turs aj-c ml-16 '
          document.getElementsByClassName('gzs')[0].className = 'staijianc_noactive gzs aj-c ml-16 staijianc_active'
          shuiq([230, 140, 130, 140, 1030])

          break;

        default:
          break;
      }
    }

    // 安防应急--监控设备等tab的切换
    function anfyj(value) {
      // document.querySelector('.box_right_top_list').innerHTML='' 
      document.querySelectorAll('.box_right_top_list_item').forEach((item, index) => {
        item.className = 'flex s-b mt-18 box_right_top_list_item ';
      })

      switch (value) {
        case 'jksbs':
          document.getElementsByClassName('jksb')[0].className = 'aj-c jksb bsyq_item_active';
          document.getElementsByClassName('fkqy')[0].className = 'aj-c fkqy '
          document.getElementsByClassName('fkzd')[0].className = 'aj-c fkzd'
          document.getElementsByClassName('yjcs')[0].className = 'aj-c yjcs'
          document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
          box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度
          break;
        case 'fkqys':
          document.getElementsByClassName('jksb')[0].className = 'aj-c jksb';

          document.getElementsByClassName('fkqy')[0].className = 'aj-c fkqy bsyq_item_active'
          document.getElementsByClassName('fkzd')[0].className = 'aj-c fkzd'
          document.getElementsByClassName('yjcs')[0].className = 'aj-c yjcs'
          document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
          box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度
          break;
        case 'fkzds':
          document.getElementsByClassName('jksb')[0].className = 'aj-c jksb';

          document.getElementsByClassName('fkqy')[0].className = 'aj-c fkqy '
          document.getElementsByClassName('fkzd')[0].className = 'aj-c fkzd bsyq_item_active'
          document.getElementsByClassName('yjcs')[0].className = 'aj-c yjcs'

          document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
          box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度
          break;
        case 'yjcss':
          document.getElementsByClassName('jksb')[0].className = 'aj-c jksb';

          document.getElementsByClassName('fkqy')[0].className = 'aj-c fkqy '
          document.getElementsByClassName('fkzd')[0].className = 'aj-c fkzd'
          document.getElementsByClassName('yjcs')[0].className = 'aj-c yjcs bsyq_item_active'

          document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
          box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度
          break;

        default:
          break;
      }

    }


    // 巩固脱贫的滚动条
    function InnerFunction(e) {
      // 获取所有的进行清楚选中的样式
      console.log(e, 'e')
      let allkist = document.querySelectorAll('.jb_line_item_buj_img');
      allkist.forEach((item, index, arr) => {
        arr[index].className = 'jb_line_item_buj_img'
      })
      if (e.target.parentNode.className == 'swiper-slide swiper-slide-visible swiper-slide-next') {
        e.target.parentNode.firstElementChild.firstElementChild.className = 'jb_line_item_buj_img  jb_line_item_buj_img_active'
        e.target.parentNode.firstElementChild.firstElementChild.className = 'jb_line_item_buj_img  jb_line_item_buj_img_active'

        var month = e.target.parentNode.firstElementChild.firstElementChild.nextElementSibling.innerHTML;

        clickMonth(month);

      }
      if (e.target.parentNode.className == 'jb_line_item_buj') {
        e.target.parentNode.firstElementChild.className = 'jb_line_item_buj_img  jb_line_item_buj_img_active'
        var month = e.target.parentNode.firstElementChild.nextElementSibling.innerHTML;

        clickMonth(month);
      }
    }
    // 获取点击的月份
    function clickMonth(name) {
      console.log(name)

      switch (name) {
        case '01月':
          ggtpbank(1, 2, 223, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [1222, 3344, 3790, 2349, 1654, 1230])

          break;
        case '02月':
          ggtpbank(1, 2, 223, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3288, 322, 2222, 2349, 1654, 1230])
          break;
        case '03月':
          ggtpbank(1, 222, 3, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [1233, 1230, 2345, 2349, 2324, 1230])
          break;
        case '04月':
          ggtpbank(1, 332, 333, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 3244, 3790, 2349, 1654, 1230])
          break;
        case '05月':
          ggtpbank(13, 233, 33, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1345, 3790, 3334, 2345, 1230])
          break;
        case '06月':
          ggtpbank(221, 2, 3, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
          break;
        case '07月':
          ggtpbank(111, 12, 3, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
          break;
        case '08月':
          ggtpbank(1, 112, 213, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [31012, 11230, 37920, 222, 1654, 1230])
          break;
        case '09月':
          ggtpbank(111, 122, 3, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3333, 2222, 4334, 4434, 1654, 1230])
          break;
        case '10月':
          ggtpbank(111, 2, 113, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 22234, 2345, 1123, 1654, 1230])
          break;
        case '11月':
          ggtpbank(221, 222, 223, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [1245, 3344, 3790, 2455, 1654, 1230])
          break;
        case '12月':
          ggtpbank(221, 222, 33, 4)
          // 巩固脱贫ggecharts
          ggecharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
          break;

        default:
          break;
      }
    }

    // 巩固脱贫的版块
    function ggtpbank(tuops, jianceh, dibaoh, tuopinrens) {

      document.getElementsByClassName('ggtpbank')[0].innerHTML =
        ` <div class="bsyq_right mb-31  pb-10 pp-12">
            <div class="  aj-c bsyq_right_title">脱贫户</div>
            <div class="  aj-c bsyq_right_num mt-11" style="color: #1AFFE4;">${tuops}</div>
          </div>
          <div class="bsyq_right mb-31  pb-10 pp-12 ">
            <div class="  aj-c bsyq_right_title">监测户</div>
            <div class=" aj-c bsyq_right_num mt-11" style="color: #F9D354;">${jianceh}</div>
          </div>
          <div class="bsyq_right mb-31  pb-10 pp-12">
            <div class="  aj-c bsyq_right_title">低保家庭</div>
            <div class="  aj-c bsyq_right_num mt-11" style="color: #FFA13F;">${dibaoh}</div>
          </div>
          <div class="bsyq_right mb-31  pb-10 pp-12">
            <div class="  aj-c bsyq_right_title">脱贫人数</div>
            <div class="  aj-c bsyq_right_num mt-11" style="color: #34CE72;">${tuopinrens}</div>
          </div>`
    }
    // 选择安防应急的列表 


    $('.box_right_top_list_item').click(function () {
      console.log('bdueiwdbig')
      let index = $(this).index();
      console.log(index, 'indexq')
      var arrdom = document.querySelectorAll('.box_right_top_list_item');

      arrdom.forEach((item, index, arr) => {
        item.className = 'flex s-b mt-18 box_right_top_list_item'
      })
      document.querySelectorAll('.box_right_top_list_item')[index].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
      switch (index) {
        case 0:
          box_right_top_quan(index, arrdom.length, '浦东街镇0', '11.0%');//点击的索引，一共的长度 
          break;
        case 1:
          box_right_top_quan(index, arrdom.length, '浦东街镇1', '20%');//点击的索引，一共的长度 
          break;
        case 2:
          box_right_top_quan(index, arrdom.length, '浦东街镇2', '30%');//点击的索引，一共的长度 
          break;
        case 3:
          box_right_top_quan(index, arrdom.length, '浦东街镇3', '50%');//点击的索引，一共的长度 
          break;

        default:
          break;
      }
    });




    // var afyjList = document.querySelectorAll('.box_right_top_list_item')
    // afyjList.forEach((i, index1, arr) => {
    //   i.onclick = (e) => {
    //     i.className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active'
    //     console.log(i, 'i')
    //   }
    // }); 
  </script>



  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->


  <!-- 先引入jquery -->

  <script>
    var swiper = new Swiper(".mySwiper", {
      watchSlidesProgress: true,
      slidesPerView: 3,
    });
  </script>

</body>

</html>